/* Stylesheet für Website www.fahrschule-kolaschnik.de */
/* copyright 2021 Stephan Kolaschnik */
/* email hostmaster@kolaschnik.de */

/* Verschiedene Schriftarten zur Auswahl */
/* font-family: 'Poppins', sans-serif; */
/* font-family: 'Work Sans', sans-serif; */

/*globale Variablen für die verschiedenen Farben definieren*/
/* Originalfarben Logo  */
/* Gelb rgb(255, 255, 0) */
/* Grün rgb(37,150, 6) */
/* Rot rgb(254, 3, 10) */
/* Testwert Gelb rgb(230, 230, 120, 1) zu Matt*/

:root {
    --hintergrund:          rgb(254, 3, 10);
    --hintergrund-header:   linear-gradient(to right, rgb(230, 230, 70, 1), rgba(230,230,70,.35));
    --hintergrund-inhalt:   rgba(230, 230, 70, .8);
    --hintergrund-footer:   linear-gradient(to right, rgba(230, 230, 70, 1), rgba(230,230,70,.35));
    --navfarbe:             rgba(254, 3, 10, 0.8);
    --button:               rgba(254, 3, 10, 0.8);
    --button-hover:         rgb(37, 150, 6);
    --button-text:          rgb(230, 230, 70);
    --button-text-hover:    rgb(255, 255, 255);
    --logofarbe:            rgb(254, 3, 10);
    --hamburger:            rgb(254, 3, 10);
    --box-shadow:           rgba(37, 150, 6, .6);
}

/*für alle Befehle gültige Argumente*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*Scrolldefinition beim Anklicken eines Ankers innerhalb des Dokuments*/
html, body{
    scroll-behavior: smooth;
    overflow: auto;
}

/* unterschiedliche Transparenzstufen der Hintergrundfarbe */
.o0  { background-color: rgba(250, 247, 160, 0); }
.o2  { background-color: rgba(250, 247, 160, 0.2); }
.o4  { background-color: rgba(250, 247, 160, 0.4); }
.o6  { background-color: rgba(250, 247, 160, 0.6); }
.o8  { background-color: rgba(250, 247, 160, 0.8); }
.o10 { background-color: rgba(250, 247, 160, 1); }

/* rgba Schreibweise für ausgesuchtes Gelb #FAF7A0 rgb(250 247 160) */
body{
    font-family: montserrat, sans-serif;
    font-weight: normal;
    background-image: url(/pics/hintergrund.jpg); 
    background-attachment: fixed;
    background-position: center;
}

/* responsive Images */
img {
    width: auto;
    height: 100%;
}
img.resize {
    /*max-width:50%;*/
    max-height:100%; 
}
img.resize-agb {
    max-width: 75vw;
    /* max-height:100%; */
    padding: 1em;
    object-fit: scale-down;
}

figure {
    object-fit: cover;
}

/* Definition der Headlines h1- h5 */
h1,h2,h3,h4,h5,h6{
    color:var(--button-hover);
    /* margin-top: .5em; */
    /* margin-bottom: .5em; */
    /* margin-left: 1em; */
    /* margin-right: .75em; */
    /* padding-top: .5rem; */
    /* padding-left: 3rem; */
    /* padding-right: 3rem; */
    /* padding-bottom: .5rem; */
    /* line-height: 1em; */
    text-decoration: underline;
    /* text-align: center; */
}

h1{
    font-size: 2.7em;
    line-height: 2.1em;/* 2.1 */
    margin-left: .835em;
}
h2{
    font-size: 2.3em;
    line-height: 1.8em;/* 1.8 */
    margin-left: 1em;
}
h3{
    font-size: 2.05em;
    line-height: 1.7em;/* 1.7 */
    margin-left: 1.14em;
    
}
h4{
    font-size: 1.75em;
    line-height: 1.5em;/* 1.5 */
    margin-left: 1.353em;
}
h5{
    font-size: 1.55em;
    line-height: 1.45em;/* 1.5 */
    margin-left: 1.55em;
}
h6{
    /* color: violet; */ /* Farbwert zum exakten ausrichten der überschriften auf Zeilenanfang*/
    font-size: 1.35em;
    line-height: 1.35em;/* 1.2 */
    margin-left: 1.8em;
}

/* a{ */
    /* padding: .55vw; */
    /* background-color: var(--navfarbe); */
    /* color: var(--button-text); */
    /* text-decoration: none; */
    /* font-weight: 400; */
    /* font-size: 1.2vw; */
    /* text-align: center; */
    /* opacity: 1; */
/* } */

/* Main Grid Definition mit nachfolgender Definition der Grid Items */
main{
    display: grid;
    grid-template-columns: 10vw 80vw 10vw;
    grid-template-rows: 10vh auto auto;
    grid-auto-rows: auto;
    grid-auto-flow: row;
    justify-items: center;
    align-items: center;
    row-gap: 4em;
}
/* Itemdef. fürs Grid - Gleich mal ein paar mehr ;-) */
.item-first,
.item2,
.item-last{
    grid-column-start: 2;
    justify-self: start;
    align-self: start;
}

.item-first,
.item-last{
    visibility: hidden;
}

.item-first{
    grid-row: 1;
}
/* .item2{ */
    /* grid-row-start: 2; */
/* } */

.img-grid{
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto;
}
/* Klasse für den Inhalt */
/* auskommentierte Argumente sind für die Positionierung ohne Grid gewesen */
.inhalt{
    /* position: relative; */
    /* left: 10vw; */
    /* top: 8em; */
    /* height: 80vh; */
    width: 80vw;
    background: var(--hintergrund-inhalt);
    background-size: cover;
    font-size: 0.85em;
}

/* Definition der Inhaltsbox mit Schatten */
.shadow {
    padding: 10px;
    border: 1px solid var(--logofarbe);
    border-radius: 50px;
    line-height: 4em;
    box-shadow: 0 0 15px 12px var(--box-shadow);
}

/* Definition der Überschrift der Inhaltsbox mit passendem Abstand rundherum*/
.ueberschrift{
    /* padding-top: 1em; */
    margin-left: 1em;
    margin-right: 1em;
    /* padding-bottom: 1em; */
    /* line-height: 1em; */
    text-decoration: underline;
    /* text-align: center; */
}

/* der auf die Überschrift folgende Fließtext, ebenfalls passend responsiv ausgerichtet */
.fliesstext{
    padding: 1em 3em;
    line-height: 1.5em;
    font-size: .8em;
    font-weight: 600;
    text-align: left;
}

/* Ums einfacher zu gestalten wird der <p>-tag einfach wie der Fließtext konfiguriert */

p {
    padding-top: 1em;
    padding-left: 3em;
    padding-right: 3em;
    padding-bottom: 1em;
    /* margin-top: 1em; */
    /* margin-left: 1.5em; */
    /* margin-right: 1.5em; */
    /* margin-bottom: 1em; */
    line-height: 1.5em;
    font-size: .8em;
    font-weight: 600;
    text-align: left;
}

/* .news { */

    /* columns: auto 24em; */
/* } */

.news img {
    float: right;
    padding-left: 12vw;
    margin-left: 0.5em;
}

/* Raster für Buttons bzw. Konktaktdaten inline in der Inhaltsbox */
.i-grid{
    display: grid;
    grid: none / auto-flow 1fr;
    /* flex-flow: row wrap; */
    /* grid-template-columns: none; */
    /* grid-template-columns: auto auto auto; */
    /* grid-template-rows: min-content; */
    /* grid-auto-columns: 1fr; */
    text-align: center;
    align-items: center;
    justify-items: center;
    font-size: 0.8em;
    line-height: 1.3em;
    font-weight: 600;
    padding-bottom: 1.5em;
}

.i-flex{
    display: flex;
    flex-flow: row wrap;
    padding-left: 2.5em;
    /* grid: none / auto-flow 1fr; */
    /* grid-template-columns: none; */
    /* grid-auto-flow: column; */
    /* grid-template-columns: auto auto auto; */
    /* grid-template-rows: auto; */
    /* grid-auto-columns: 1fr; */
    /* grid-auto-rows: auto; */
    text-align: center;
    align-items: center;
    justify-items: center;
    font-size: 0.8em;
    line-height: 1.3em;
    font-weight: 600;
    padding-bottom: 1.5em;
}
/* Inline Items für das i-grid Raster */
.i-item1,
.i-item2,
.i-item3{
    /* grid-column-start: 1; */
    justify-self: center;
    align-self: start;
}

/* Färbung der Jahreszahlen der Firmengeschichte */
.jahreszahlen{
    color: var(--button);
}

/* Testelement zur Anordnung hinter dem eigentlichen Inhalt, damit man über den footer hochscrollen kann, sonst bleibt derzeit noch Content dahinter */
.platzhalter{
    z-index: -10;
    color: rgba(252, 0, 210, .8);
    background: rgba(65, 105, 225, .5);
    /* position: relative; */
    /* left: 5vw;     */
    /* height: 1vh; */
    /* width: 10vw; */
    /* margin-top: 25vh; */
}
   
/* Headerdefinition */
header {
    background: var(--hinterground-header);
    text-align: center;
    position: fixed; /* alles fließt dahinter durch */
    z-index: 999; /* 999 sollte nie überlagert werden ;-) */
    width: 100%;
}

/* Platzhalterlogo soll nachher mit passendem Logo ersetzt werden */
.logo{
    margin: 0;
    background: var(--hintergrund-header);
    color: var(--logofarbe);
    letter-spacing: 5px;
    font-size: 1.3em;
}

/* Testklasse für eine Sidebar */
.sidebar{
    width: 5em;
    height: 90vh;
    background: var(--hintergrund-footer);
    position: relative;
    top: 8vh;
}

/* Definition der Inline Links innerhalb einer Inhaltsbox */
/* div li{ */
    /* list-style: none; */
    /* color: rgb(19, 48, 216); */
    /* background: rgb(0, 247, 255); */
/* } */

.inline-link li{
    list-style: none;
    background-color: var(--button);
    margin: .5em;
    padding:0.35em;
    font-weight: 500;
    /* font-size: .9em; */
    /* transform: scale(1.3,1.3); */
    /* transition: transform 500ms ease-in-out; */    
}

.inline-link a{
    text-decoration: none;
    color: var(--button-text);
}

/* inline-link Definition für animierte Buttons, warum auch immer geht das nicht mit dem Anker a, deswegen halt allein :hover */
.inline-link :hover{
    background-color: var(--button-hover);
    color: var(--button-text-hover);
    animation: jumpUp 0.75s ease-in-out;
}

.liste,
.liste-nummeriert,
.liste-ohne {
    margin: 0.5em 3em;
    line-height: 1.5em;
    font-size: .8em;
    font-weight: 600;
    text-align: left;
}

.liste ul{
    list-style: disc;
    list-style-position: inside;
}

.liste-nummeriert ol{
    list-style: decimal;
    list-style-position: inside;
}

.liste-ohne {
    list-style: none;
}

table {
    border-collapse: separate;
    border-spacing: 0.2em;
}

th, td {
    padding: .2em .5em;
    border-radius: .1em;  
}
  
  thead th {
    /* background-color: #ffebe6; */
    /* color: #c32e04; */
}

td {
    font-style: italic;
    text-align: right;
    box-shadow: inset 1px 3px 5px -3px rgba(0,0,0,.5);
}   

td:empty{
    box-shadow: none;
}

/* mobile Navigationsleisten Definition */
nav{
    position: absolute;
    text-align: center;
    top: 100%;
    right: 0;
    width: 100%;
    background-color: var(--navfarbe);
    transform: scale(1, 0);
    transform-origin: top;
    transition: transform 400ms ease-in-out; /* langsames ausklappen */
}

nav ul{
    line-height: 1.2em;
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li{
    margin-top: 1em;
    margin-bottom: 1em;
    margin-right: 1em;
}

nav li[aria-current] a {
	background-color: var(--button-hover);
	color: var(--button-text-hover);
	/* border: 1px solid green; */
	padding: 0.18em;
}

nav a{
    /* padding: .2em; */
    color: var(--button-text);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.5em;
    /* opacity: 0.7; */
    /* transition: opacity .6s 150ms ease-in-out; */
}

/* obsolete Definition für footer Liste */
/* li.footer { */
    /* display: inline-flex; */
    /* gap: 0.3em 0.3em; */
    /* list-style: none; */
    /* justify-items: stretch; */
    /* align-items: center; */
    
/* } */
/* obsolete definition der Anker für die Footer Auflistung */
/* li a{ */
    /* flex-grow: 1; */
    /* flex-shrink: 2; */
    /* flex-basis: auto; */
    /* text-decoration: none; */
    /* padding: .2em; */
    /* background-color: var(--button); */
    /* color: var(--button-text); */
/* } */

/* Einrichtung der springenden Anker bzw. divs :-) */
/* a:hover{ */
    /* background-color: rgb(19, 100, 12); */
    /* color: var(--button-text-hover); */
    /* transition: opacity 250ms ease-in-out; */
    /* animation: jumpUp 650ms ease-in-out; */
/* } */

nav a:hover{
    background-color: var(--button-hover);
    color: var(--button-text-hover);
    /* transition: opacity 500ms ease-in-out; */
    animation: jumpUp 0.75s ease-in-out;
    opacity: 1;
}
/* Da ist noch irgendwie der Wurm drin für die Animation bei den Inline-Links */
/* div li a:hover{ */
    /* background-color: rgb(19, 100, 12); */
    /* color: var(--button-text-hover); */
    /* transition: opacity .6 250ms ease-in-out; */
    /* animation: jumpUp 0.6s ease-in-out; */
/* } */

/* Navbuttons Animationablauf */
@keyframes jumpUp{
    0%  {transform: scale(0.85, 0.85) rotate(7deg)translate(-5%, 5%);}
    25% {transform: scale(1.15, 1.15) rotate(15deg)translate(-12%, 7%);}
    50% {transform: scale(1.5, 1.5) rotate(20deg) translate(-20%, 10%);}
    75% {transform: scale(0.85, 0.85) rotate(-15deg)translate(-13%, 10%);}
    100%{transform: scale(1.0, 1.0) rotate(-7deg)translate(-5%, 5%);}
}
    
/* mobile Viewport Nav-Menü Animation fürs Aus- und Einklappen */
.nav-schalter:checked ~ nav{
    transform: scale(1, 1);
}
.nav-schalter:checked ~ nav a{
    opacity: 1;
    transition: opacity 250ms ease-in-out 250ms;
}
    
/* Checkbox Ausblendung */
.nav-schalter{
    display: none;
}
    
/* Hamburger Positionierung */
.nav-schalter-label{
    position: absolute;
    top: 0;
    right: 0;
    margin-right: 1em;
    /*border: 1px solid red;*/
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;    
}

/* Grafikdefinition für den Hamburger */
.nav-schalter-label span,
.nav-schalter-label span::before,
.nav-schalter-label span::after{
    display: block;
    background: var(--hamburger);
    height: 4px;
    width: 1.8em;
    border-radius: 2px;
    position: relative;
}

/* die obere und untere Burgerlinie */
.nav-schalter-label span::before,
.nav-schalter-label span::after{
    content: '';
    position: absolute;
}

/* unten */
.nav-schalter-label span::before{
    bottom: 8px;
}

/* oben */
.nav-schalter-label span::after{
    top: 8px;
}
/* Hamburger Ende */

/* Responsives Webdesign für Desktop und Tablets */
@media screen and (min-width:50em) {
    
    /* Ausblendung vom Hamburger */
    .nav-schalter-label{
        display: none;
    }
    
    /* Definition des Headers als Grid für das Logo und die Navleiste */
    header {
        display: grid;
        grid-template-columns: minmax(295px, 1fr) minmax(500px, 1fr) 1fr;   
    }
    /* Logodef. fürs bisherige Logo, damit es keine Verzerrungen gibt */
    .logo{
        grid-column: 1 / 1;
        font-size: 2em;
    }

    /* Einrichtung der Navigation für Desktop und Tablets*/
    nav{
        all: unset; /*Setzt alles bisherige für nav festgelegte auf Standard zurück  */
        background: var(--hintergrund-header);
        grid-column: 2 / span 4;
        grid-row: 1;
    }
    
    nav ul{
        list-style: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        /*background: #333;
        border: 1px solid red;
        float: right;*/
    }

    /* Inline-Flex für die Navleiste */
    nav li{
        display: inline-flex;
        justify-content: right;
        align-items: flex-end;
        gap: 0.1em 0.1em;
    }

    /* Listenanpassung für größere Bildschirme */
    nav a{
        padding: .55vw;
        background-color: var(--navfarbe);
        color: var(--button-text);
        text-decoration: none;
        font-weight: 400;
        font-size: 1.2vw;
        text-align: center;
        opacity: 1;
    }

    /* Markierung der aktuellen Seite */
    nav li[aria-current] a {
        padding: 0.85em;
    }

    /* li a:hover{ */
        /* background-color: var(--button-hover); */
        /* color: var(--button-text-hover); */
    /* } */
    
    /* Anpassungen für den Inhalt, Auskommentiertes war für ein Design ohne Grid */
    .inhalt{    
        /*position: relative;
        left: 10vw;
        top: 10em;*/
        /*display: grid;*/
        /*place-items: center stretch;*/
        font-size: 1.5em;
    }
    
    /* Ausrichtung der Überschrift */
    /* .ueberschrift{ */
        /* padding-top: 1rem; */
        /* padding-left: 3rem; */
    /* } */

    /* Ausrichtung des Fließtextes */
    /* .fliesstext{ */
        /* margin-top: .5em; */
        /* padding-top: .5rem; */
        /* padding-left: 2em; */
        /* margin-left: 2em; */
        /* padding-right: 4rem; */
        /* padding-bottom: 3rem; */
    /* } */

}


/* flex-Item aus einem anderen Versuch die Homepage zu konsolidieren */
.flex-item {
    border: 1px solid;
	border-radius: 0 .5em .5em;
	margin: .5em;
	padding: .5em;
	background: #ffebe6;
}

/* Footer Definition mit eigenem Grid für die schönen Button-Icons für die externen Links */
footer {
    display: grid;
    grid-template-columns: minmax(40px, 1fr);
    grid-template-rows: minmax(45px, 7vh) 1.5em;
    gap: 0.5em 0.5em;
    background: var(--hintergrund-footer);
    position: fixed;
    bottom: 0vh;
    width: 100vw;
    left: 0vw;
    font-size: 1.5vh;
    /*padding-bottom: 1vh;*/
    text-align: center;
}

/* Die Klasse .footer_buttons war eigentlich für eine separate Navigationsleiste fürs Impressum, Datenschutz und AGB gedacht, prinzipiell obsolet */
/* .footer-buttons{ */
    /* display: flex; */
    /* list-style: none; */
    /* justify-content: space-around; */
    /* object-fit: cover; */
/* } */

/* damit die Buttons ebenso wie in der Hauptnavigation schön animiert sind */
.footer-buttons a{

    /* transform: translate(-50%); */
    /* transition: transform .6s; */
    /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); */
    cursor: pointer;
    /* animation: jumpUp 0.6s ease-out; */
}

.footer-buttons a:hover{
    /* transform: translate(-50%); */
    /* transition: transform .6s; */
    /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); */
    /* cursor: pointer; */
    animation: jumpUp 0.6s ease-out;
}